<template>
    <div class="layout">
        <div class="layout-hd">
            <div class="layout-hd-tp">
                <router-link to="/web" class="home_link">
                    <div style="height: 50px"> <img src="../../../assets/image/logo_white.png" style="margin-right: 10px; height: 100%"/></div>
                </router-link>
                <div class="layout-nav">
                    <router-link to="/account" :class="currentPath =='/account'? `home_link on`:`home_link`">
                    <span class="layout-nav-item">多币账户</span>
                    </router-link>
                    <router-link to="/star" :class="currentPath =='/star'? `home_link on`:`home_link`">
                    <span class="layout-nav-item">星座卡</span>
                    </router-link>
                    <router-link to="/about" :class="currentPath =='/about'? `home_link on`:`home_link`">
                    <span class="layout-nav-item">关于我们</span>
                    </router-link>
                </div>
                <div class="login">
                    <router-link to="/login" class="home_link">
                        <span class="login-item">登录</span>
                    </router-link>
                    <router-link to="/register" class="home_link">
                        <span class="login-item item-btn">注册</span>
                    </router-link>
                </div>
            </div>
            <div style="position: relative; width: 1440px; margin-left: -720px; left:50%; height: 1000px;">
                <div class="layout-star1-bg"></div>
                <div class="layout-star2-bg"></div>
                <div class="layout-star3-bg"></div>
                <div class="layout-star4-bg"></div>
            </div>

            <!--<div class="layout-hd-bg1"></div>
            <div class="layout-hd-bg2"></div>-->

            <div class="w-1440">
                <div class="layout-hd-btns">
                    <div class="layout-hd-btn1">立即注册</div>
                    <div class="layout-hd-btn2">马上登录</div>
                </div>
                <slot name="header"></slot>
            </div>

        </div>
        <div>
            <slot></slot>
        </div>
        <div class="layout-ft">
            <div class="layout-ft__wp">
                <div class="layout-ft-lt" style="margin-left: 80px">
                    <div class="layout-ft-lt__title1">全球派</div>
                    <div class="layout-ft-lt__title2">开始建立联系</div>
                    <div class="layout-ft-lt__btn">立即注册</div>
                </div>
                <div class="layout-ft-rt">
                    <div class="layout-ft-rt-item">
                        <div class="layout-ft-rt-item__title">多币种账户</div>
                        <div class="layout-ft-rt-item__nav">
                            <span>数字离岸账户</span>
                            <span>电商收款账户</span>
                            <span>B2B收款账户</span>
                        </div>
                    </div>
                    <div class="layout-ft-rt-item">
                        <div class="layout-ft-rt-item__title">星座卡</div>
                        <div class="layout-ft-rt-item__nav">
                            <span>星座卡(VCC)</span>
                        </div>
                    </div>
                    <div class="layout-ft-rt-item">
                        <div class="layout-ft-rt-item__title">关于我们</div>
                        <div class="layout-ft-rt-item__nav">
                            <span>全球派简介</span>
                            <span>联系我们</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layout-copy">
            <div class="layout-copy__wp">
                闽ICP备2022046327号-2 © 全球派 2024版权所有
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        currentPath: null
      };
    },
    created() {
      this.currentPath = this.$route.path;
      console.log("111111111111",this.currentPath)
    }
  };
</script>

<style lang="scss" scoped>
.layout {
    min-width: 1440px;
    background-color: #f1f2f4;
}
.layout-hd {
    width: 100vw;
    position: relative;
    height: 930px;
    margin-bottom: 50px;
    background: url("../../../assets/image/web/header_bg.png") repeat-x;
    .w-1440{
        width: 1440px;
        height: 100%;
        display: block;
        position:absolute;
        top:110px;
        left: 50%;
        margin-left:-720px;
    }
    .layout-hd-tp {
        width: 1440px;
        display: flex;
        padding: 36px 0px;
        background: transparent;
        align-items: center;
        justify-content: space-between;
        font-size: 27px;
        color: #ffffff;
        position: absolute;
        left: 50%;
        margin-left:-720px;
        z-index: 20;
        min-width: 1440px;
        .on{
            .layout-nav-item{
                display: inline-block;
                line-height: 30px !important;
                border-bottom: 2px solid #fff;
            }
        }
        .home_link{
            line-height: 30px !important;
            color:#fff;
        }
        .login{
            .login-item{
                font-size: 16px;
                width: 50px;
                line-height: 30px;
                display: inline-block;
                text-align: center;
                border-radius: 5px;
                border: 1px solid #fff;
                cursor: pointer;
                color: #fff;
            }
            .item-btn{
                width: 50px;
                line-height: 30px;
                background: #fff;
                display: inline-block;
                text-align: center;
                border-radius: 5px;
                margin-left: 20px;
                color: #7D3AEA;
            }
        }
        .layout-nav {
            .layout-nav-item {
                font-size: 16px;
                line-height: 22px;
                margin-left: 60px;
                cursor: pointer;
            }
        }
    }
    .layout-hd-bg1 {
        height: 1039px;
        background: url("../../../assets/image/web/bg1.png") center center;
        background-size: 100% 100%;
        position: relative;
        width: 1859px;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .layout-hd-bg2 {
        height: 970px;
        background: url("../../../assets/image/web/bg2.png") center center;
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        width: 1585px;
        right: 0;
        z-index: 1;
    }
    .layout-star1-bg {
        width: 286px;
        height: 242px;
        background: url("../../../assets/image/web/star1.png") center center;
        background-size: 100% 100%;
        position: absolute;
        bottom: 100px;
        left: -150px;
        z-index: 3;
    }
    .layout-star2-bg {
        width: 339px;
        height: 306px;
        background: url("../../../assets/image/web/star2.png") center center;
        background-size: 100% 100%;
        position: absolute;
        bottom: 162px;
        left: -67px;
        z-index: 4;
    }
    .layout-star3-bg {
        width: 202px;
        height: 179px;
        background: url("../../../assets/image/web/star3.png") center center;
        background-size: 100% 100%;
        position: absolute;
        top: 211px;
        left: 792px;
        z-index: 4;
    }
    .layout-star4-bg {
        width: 117px;
        height: 104px;
        background: url("../../../assets/image/web/star4.png") center center;
        background-size: 100% 100%;
        position: absolute;
        top: 166px;
        left: 879px;
        z-index: 4;
    }
    .layout-hd-btns {
        position: absolute;
        top: 500px;
        left: 0px;
        z-index: 30;
        display: flex;
        .layout-hd-btn1 {
            width: 144px;
            height: 61px;
            background: #ffffff;
            border-radius: 6px;
            font-size: 20px;
            color: #7d3aea;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .layout-hd-btn2 {
            width: 144px;
            height: 61px;
            border-radius: 6px;
            border: 1px solid #ffffff;
            font-size: 20px;
            color: #ffffff;
            margin-left: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.layout-copy {
    /*width: 1920px;*/
    background: #202020;
    height: 56px;

    .layout-copy__wp {
        width: 100vw;
        height: 56px;
        font-size: 14px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.layout-ft {
    //width: 1920px;
    background: #3d3d42;

    .layout-ft__wp {
        width: 1440px;
        height: 378px;
        left: 50% !important;
        display: flex;
        position: relative;
        margin-left: -720px;
        .layout-ft-lt {
            height: 100%;
            padding-top: 79px;
            color: #ffffff;
            .layout-ft-lt__title1 {
                font-size: 29px;
                line-height: 41px;
            }
            .layout-ft-lt__title2 {
                font-size: 22px;

                line-height: 37px;
                margin-top: 39px;
            }
            .layout-ft-lt__btn {
                width: 144px;
                height: 61px;
                border-radius: 6px;
                border: 1px solid #ffffff;
                margin-top: 24px;
                font-size: 20px;
                line-height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .layout-ft-rt {
            flex: 1;
            height: 100%;
            padding-top: 106px;
            display: flex;
            justify-content: flex-end;
            .layout-ft-rt-item {
                display: flex;
                flex-direction: column;
                margin-left: 139px;
                color: #ffffff;
                .layout-ft-rt-item__title {
                    font-size: 18px;
                    line-height: 30px;
                }
                .layout-ft-rt-item__nav {
                    display: flex;
                    flex-direction: column;
                    font-size: 16px;
                    line-height: 28px;
                    span {
                        margin-top: 18px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>
